<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup (props, { emit }) {
    provide('activename', props.modelValue)
    const activename = useVModel(props, 'modelValue', emit)
    const changeactive = (name, i) => {
      activename.value = name
      emit('tabclick', { name, i })
    }
    return { changeactive }
  },
  render () {
    const slots = this.$slots.default()
    // 内容
    // 生成节点时要考虑是不是通过v-for生成的
    const dynamicPanels = []
    slots.forEach((item) => {
      if (item.type.name) {
        dynamicPanels.push(item)
      } else {
        dynamicPanels.push(...item.children)
      }
    })
    // 导航栏
    const nav = (
      <nav>
        {dynamicPanels.map((item, i) => {
          return (
            <a
              onClick={(e) => {
                this.changeactive(item.props.name, i)
              }}
              class={{ active: this.modelValue === item.props.name }}
              key={item.name}
            >
              {item.props.label}
            </a>
          )
        })}
      </nav>
    )
    return <div class="xtx-tabs">{[dynamicPanels, nav]}</div>
  }
}
</script>
<style lang="less" scoped>
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
